<template>
    <div class="box">
        <router-link replace to="login">
            <span>
                <van-icon name="arrow-left" />
            </span>
        </router-link>

        <h3>忘记密码</h3>

        <van-form @submit="onSubmit">
            <!-- 手机号 -->
            <van-field v-model="phone" type="text" name="手机号" icon="user-circle-o" placeholder="请输入手机号"
                :rules="[{ required: true, message: '请输入手机号' }]" />
            <!-- 密码 -->
            <van-field v-model="mima" type="password" name="新密码" icon="user-circle-o" placeholder="请输入新密码"
                :rules="[{ required: true, message: '请输入新密码' }]" />
            <!-- 验证码 -->
            <van-field v-model="mobile" center clearable placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" :disabled="disabled" type="primary" @click="send" color="#b0bdb6" style="border-radius:16px;padding-left: 0;
                    padding-right: 20px ;">{{ yzm }}</van-button>
                </template>
            </van-field>
            <!-- 修改完成 -->
            <div style="margin: 16px;" route>
                <van-button block @click="opens" style="width:70%;margin:0 auto" type="info" native-type="submit"
                    color="#3399ff">确定
                </van-button>
            </div>

        </van-form>
    </div>
</template>

<script>
import { Dialog, Notify } from 'vant';

export default {
    data() {
        return {
            phone: '',
            mima: '',
            mobile: '',
            disabled: false,
            yzm: '发送验证码',
        }
    },
    components: {
        [Dialog.Component.name]: Dialog.Component,
        [Notify.Component.name]: Notify.Component,
    },
    methods: {

        onSubmit(values) {
            console.log("submit", values);
        },
        send() {
            // 验证码

            // 默认可以点击 点击后禁止点击
            this.disabled = true;
            // 点击后文字改变
            this.yzm = '发送中...';
            // 点击后出现转圈
            this.loading = false

            // 验证码
            let time = null;
            let datas = 60;
            this.$http.post('/user/sendSms', {
                mobile: this.phone,
                type: 'login'
            }).then((res) => {
                console.log(res)
                if (res.data.code == 0) {
                    // Toast('提示内容');
                    this.$toast('验证码已经发送到' + this.phone + '请注意查收')

                    time = setInterval(e => {
                        datas--;
                        this.yzm = `${datas}s后再次发送`;
                        if (datas <= 0) {
                            clearInterval(time);
                            datas = 60;
                            this.yzm = '再次发送验证码';
                            this.disabled = false;    //转换为可点击
                            console.log(e)
                        }
                    }, 1000);
                } else {
                    this.$toast(res.data.msg)  //账号已存在
                    this.disabled = false;    //转换为可点击
                    this.yzm = '再次发送'   //转换文字
                }
            })
        },
        opens() {
            this.$http.post('/user/forget', {
                username: this.phone,
                password: this.mima,
                vercode: this.mobile
            }).then((res) => {
                console.log(res);
                Notify({ type: 'success', message: res.data.msg });

            })
        }
    }
}
</script>

<style scoped>
* {
    text-align: center;
}

.box {
    width: 100%;
    height: 55px;
    background-color: #3399ff;

}

.box h3 {
    color: white;
    line-height: 55px;
    margin-top: 0;
    margin-right: 20px;
}

.box span {
    color: white;
    float: left;
    line-height: 55px;
    margin-left: 20px;
}
</style>